<template>
  <div class='container'>
    <el-dialog
      title="题目预览"
      :visible="isOpen"
      width="50%"
      @close="close">
      <!-- 题型 -->
      <div class="top">
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple">【题型】单选题</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【编号】{{data.id}}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【难度】单选2题</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【标签】单选3题</div></el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top:30px">
          <el-col :span="6"><div class="grid-content bg-purple">【学科】{{data.subjectName}}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【目录】{{data.directoryName}}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【方向】{{data.direction}}</div></el-col>
        </el-row>
      </div>
      <!-- 线条 -->
      <div class="xian"></div>

      <!-- 题干 -->
      <div class="questionStem">
        【题干】：
        <p> xxxxxx</p>
        <p>多选题 选项:(以下是正确答案)</p>
        <div style="margin-top:10px"><el-radio v-model="radio" label="1">备选项</el-radio></div>
        <div style="margin-top:10px"><el-radio v-model="radio" label="1">备选项</el-radio></div>
        <div style="margin-top:10px"><el-radio v-model="radio" label="1">备选项</el-radio></div>
        <div style="margin-top:10px"><el-radio v-model="radio" label="1">备选项</el-radio></div>
      </div>

       <div class="xian"></div>

       <div class="answer">
        【参考答案】:xxx
       </div>

       <div class="xian"></div>

       <div class="parse">
        【答案解析】:
        <span v-html="data.answer">

        </span>

       </div>

       <div class="xian"></div>

       <div class="remark">
        【题目备注】:
       </div>
       <p style="width:100%;text-align:right">
        <el-button type="primary" @click="close">关闭</el-button>
       </p>

    </el-dialog>
  </div>
</template>
/
<script>

export default {
  props: {
    isOpen: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      radio: false,
      data: ''
    }
  },

  methods: {
    // 关闭弹出框
    close () {
      this.$emit('update:isOpen', false)
    },
    opendata (row) {
      console.log(row, '子组件接收到的数据')
      this.data = row
      console.log(this.data, '子组data的数据')
    }
  }
}
</script>

<style scoped lang='less'>

.xian{
border-bottom: 1px solid#606266;;
margin:20px 0 ;
}
</style>
